<template>
<div class="idLayout">
    <div class="tagsBox">
        <div>
            <span class="title">手机号</span>
            <el-input v-model="tagsValue.phone" style="width: 300px;" placeholder="输入要查询的手机号"/>
        </div>
        <div>
            <span class="title">订单状态</span>
            <el-select
                v-model="tagsValue.status"
                >
                <el-option v-for="item in kinds" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </div>
        <div>
            <span class="title">创建时间</span>
            <el-config-provider :locale="zhCn">
                <el-date-picker
                    v-model="tagsValue.time"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start"
                    end-placeholder="End"
                    size="default"
                />
            </el-config-provider>
        </div>


        <div class="btn">
            <el-button type="primary" style="width:100%" @click="query">查询</el-button>
            <el-button type="primary" style="width:100%" @click="clear">清空查询</el-button>
        </div>

    </div>

    <el-card style="width:100%">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%;border: none; border-radius: 8px"
            v-loading="loading" 
            element-loading-text="loading..." 
            element-loading-background="white"
        >
            <el-table-column property="user_name" label="用户" />
            <el-table-column property="user_code" label="手机号" />
            <el-table-column property="room_name" label="客房类型" />
            <el-table-column property="order_name" label="订单状态">
                <template #default="scope">
                    <el-tag
                        type="success"
                        disable-transitions
                    >{{ scope.row.order_name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="start_time" label="入住时间">
                <template #default="scope">
                    <span>{{ formatYMD(scope.row.start_time) }}</span>
                </template>
            </el-table-column>
            <el-table-column property="end_time" label="离宿时间">
                <template #default="scope">
                    <span>{{ formatYMD(scope.row.end_time) }}</span>
                </template>
            </el-table-column>
            <el-table-column property="create_time" label="下单时间">
                <template #default="scope">
                    <span>{{ formatYMD(scope.row.create_time) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="reply(scope.row)" v-if="scope.row.order_code ==  2">确认接单</el-button>
                    <el-button @click="cancel(scope.row)" v-else-if="scope.row.order_code ==  8">确认取消订单</el-button>
                    <el-button @click="onIn(scope.row)" v-else-if="scope.row.order_code ==  3">确认入住</el-button>
                    <el-button @click="refund(scope.row)" v-else-if="scope.row.order_code ==  5">确认退款</el-button>
                </template>
            </el-table-column>
            <template #empty>
                    <el-empty description="无数据" />
                </template>
        </el-table>
    </el-card>

    <el-card class="pagination" body-style="padding:0">
        <el-config-provider :locale="zhCn">
            <el-pagination  :page-size="10" 
                            @current-change="changePage"
                            layout="prev, pager, next, jumper" 
                            background 
                            :total="total"
                            prev-text="上一页"
                            next-text="下一页"
                            />
        </el-config-provider>
    </el-card>
</div>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { get } from '@/http/axios' 
import { getCookies } from '@/utils/cookies'
import { useUserInfoStore } from '@/store/userInfoState'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatYMD } from '@/utils/format'

type kindsType = {
    id:number
    code: string
    name: string
}
let tableData = ref()
const tagsValue = reactive({
    phone: null,
    status: null,
    time: null,
})
let id = ref<number | string>()
const kinds = ref<Array<kindsType>>()
const store = useUserInfoStore()
let loading = ref<boolean>(true)
let total = ref<number>(0)
onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    initData()
    getOrderState()
})
function initData(pageNum: number = 1) {
    get('/order/queryHotel',{
        hotel_id: id.value,
        order_state: tagsValue.status?tagsValue.status:0,
        user_code: tagsValue.phone?tagsValue.phone:0,
        start_time: tagsValue.time?new Date(tagsValue.time[0]).getTime():0,
        end_time: tagsValue.time?new Date(tagsValue.time[1]).getTime():0,
        pageNum,
        pageSize: 10,
    }).then(res => {
        console.log('订单信息',res.result);
        
        let timer = setTimeout(() => {
            clearTimeout(timer)
            tableData.value = res.result.content
            total.value = res.result.totalCount
            loading.value = false
        },500)
    }).catch(err => {
        ElMessage.error('订单信息加载失败' + err)
        
    })
}
function query() {
    loading.value = true
    initData()
}
function getOrderState() {
    get('/orderState/queryAll').then(res => {
        kinds.value = res.result
    })
}
function clear(){
    Object.keys(tagsValue).forEach(el => {
        tagsValue[el] = null
    })
}
function changePage(val:number){
    loading.value = true
    initData(val)
}
function reply(val:any) {
    ElMessageBox.confirm(
    '您确定执行该操作吗？',
    '提醒',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
        get('/order/hotelConfirm',{
            order_id: val.id
        }).then(res => {
            if (res.result) {
                ElMessage.success('确认成功')
                loading.value = true
                initData()
            }
        }).catch(err => {
            ElMessage.error('确认失败 '  + err)
        })
    })
    .catch(() => {
      ElMessage.info('操作取消')
    })

}
function onIn(val:any) {
    ElMessageBox.confirm(
    '您确定执行该操作吗？',
    '提醒',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
        get('/order/hotelComplete',{
            order_id: val.id
        }).then(res => {
            if (res.result) {
                ElMessage.success('确认用户入住成功')
                loading.value = true
                initData()
            }
        }).catch(err => {
            ElMessage.error('确认用户入住失败 ' + err)
        })
    })
    .catch(() => {
      ElMessage.info('操作取消')
    })

}
function cancel(val:any){
    ElMessageBox.confirm(
    '您确定执行该操作吗？',
    '提醒',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
        get('/order/hotelCancel',{
            order_id: val.id
        }).then(res => {
            if (res.result) {
                ElMessage.success('确认取消订单成功')
                loading.value = true
                initData()
            }
        }).catch(err => {
            ElMessage.error('确认取消订单失败 ' + err)
        })
    })
    .catch(() => {
      ElMessage.info('操作取消')
    })

}
function refund(val:any) {
    ElMessageBox.confirm(
    '您确定执行该操作吗？',
    '提醒',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
        get('/order/hotelRefund',{
            order_id: val.id
        }).then(res => {
            if (res.result) {
                ElMessage.success('确认退款成功')
                loading.value = true
                initData()
            }
        }).catch(err => {
            ElMessage.error('确认退款失败 ' + err)
        })
    })
    .catch(() => {
      ElMessage.info('操作取消')
    })

}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/infoKinds.scss);
@import url(../../assets/css/changePagintoin.scss);
.idLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
}
.paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-radius: 8px;
}
.btn{
    width: 350px !important;
}
</style>